@import '../../../assets/tailwind.css';

.checkbox_input {
    @apply h-4 w-4 rounded-sm border-zinc-500 bg-zinc-600 text-zinc-500;

    &:focus,
    &:active {
        @apply ring-2 ring-zinc-500 ring-offset-2 ring-offset-zinc-700;
    }

    &.indeterminate:checked {
        @apply border border-zinc-500 text-zinc-500/50;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
    }
}

.text_input {
    @apply w-full rounded-lg border-0 bg-[#ffffff11] px-4 py-2 outline-none;

    &.loose {
        @apply px-6 py-3;
    }
}
